<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>购物车 - 点餐系统</title>
    <link rel="stylesheet" href="lib/element-ui.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="app">
        <!-- 顶部导航 -->
        <div class="header">
            <div class="header-back" @click="goBack">
                <i class="el-icon-arrow-left"></i>
            </div>
            <div class="header-title">购物车</div>
        </div>

        <!-- 购物车内容 -->
        <div class="cart-container">
            <!-- 购物车列表 -->
            <div class="cart-list">
                <div 
                    v-for="(item, index) in cartItems" 
                    :key="index"
                    class="cart-item">
                    <div class="cart-item-info">
                        <div class="cart-item-name">{{ item.name }}</div>
                    </div>
                    <div class="cart-item-actions">
                        <button class="quantity-btn" @click="decreaseQuantity(index)">-</button>
                        <span class="quantity">{{ item.quantity }}</span>
                        <button class="quantity-btn" @click="increaseQuantity(index)">+</button>
                        <button class="remove-btn" @click="removeItem(index)">
                            <i class="el-icon-delete"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 空购物车 -->
            <div v-if="cartItems.length === 0" class="empty-cart">
                <div class="empty-icon">🛒</div>
                <div class="empty-text">购物车是空的</div>
                <button class="back-to-shop" @click="goBack">去点餐</button>
            </div>
        </div>

        <!-- 底部操作栏 -->
        <div class="checkout-footer" v-if="cartItems.length > 0">
            <button class="clear-cart-btn" @click="clearCart">清空购物车</button>
            <button class="checkout-btn" @click="goToOrder">提交订单</button>
        </div>
    </div>

    <script src="lib/vue.js"></script>
    <script src="lib/element-ui.js"></script>
    <script src="lib/axios.js"></script>
    <script src="js/api.js"></script>
    <script src="js/cart.js"></script>
</body>
</html>